<template>
	<view class="zui-thermometer-mercury-bar" :style="style">
		<view class="ztm-bar-column-bottom"></view>
		<!-- <view class="ztm-bar-ball"></view> -->
		<view class="ztm-bar-column-top"></view>
	</view>
</template>

<script>
	/**
	 *
	 *  pagename
	 *
	 */
	export default {
		name: "zui-thermometer-mercury-bar",

		components: {},

		props: {
			width: Number,
			height: Number,
			value: {
				type: Number,
				default: 1,
			},
			border: Number,
			startColor: String,
			endColor: String,
		},

		data() {
			return {};
		},

		computed: {
			style() {
				const style = {
					width: `${this.width}px`,
					height: `${this.height}px`,
					'--ztm-bg-start': this.startColor,
					'--ztm-bg-end': this.endColor,
				};
				const widHalf = this.width / 2;
				let border = this.border ? this.border : widHalf * 0.034;
				if (border < 1) border = 1;

				style["--ztm-width"] = `${this.width}px`;
				style["--ztm-width-half"] = `${widHalf}px`;
				style["--ztm-width-inner"] = `${this.width - border * 2}px`;
				style["--ztm-height"] = `${this.height}px`;
				style["--ztm-border"] = `${border}px`;
				const columnWid = this.width * .68;
				style["--ztm-column-width"] = `${columnWid}px`
				const bgScale = (this.width * .28) / 2 / columnWid
				style["--ztm-column-bg-scale"] = `${bgScale * 100}%`
				style['--ztm-column-range'] = `${this.height - this.width}px`

				const innerHeight = this.width + (this.height - this.width) * this.value
				style['--ztm-inner-height'] = `${innerHeight}px`

				return Object.keys(style)
					.map((key) => `${key}:${style[key]}`)
					.join(";");
			},
		},

		methods: {},
	};
</script>

<style lang="scss" scoped>
	.zui-thermometer-mercury-bar {
		position: relative;
		filter: drop-shadow(4px 4px 5px rgba(0, 0, 0, 0.25));
	}

	.ztm-bar-ball,
	.ztm-bar-column-bottom,
	.ztm-bar-column-top {
		position: absolute;
		box-sizing: border-box;
	}

	.ztm-bar-ball {
		z-index: 20;
		display: flex;
		justify-content: center;
		align-items: center;
		left: 0;
		bottom: 0;
		width: var(--ztm-width, 100%);
		height: var(--ztm-width, 100%);
		border-radius: 50%;
		background-image: linear-gradient(135deg,
				var(--ztm-bg-start),
				var(--ztm-bg-end) 100%);

		&:before {
			content: "";
			display: block;
			width: calc(var(--ztm-width) - var(--ztm-border) * 2);
			height: calc(var(--ztm-width) - var(--ztm-border) * 2);
			border-radius: 50%;
		background-image: linear-gradient(135deg,
				var(--ztm-bg-start),
				var(--ztm-bg-end) 100%);
		}
	}

	.ztm-bar-column-bottom {
		z-index: 0;
		bottom: 0;
		left: 50%;
		width: var(--ztm-column-width);
		height: var(--ztm-inner-height);
		// border-radius: calc((var(--ztm-width) - var(--ztm-border) * 2) / 2);
		background-image: linear-gradient(135deg,
				var(--ztm-bg-start),
				var(--ztm-bg-end) 100%);
		transform: translateX(-50%);
	}

	.ztm-bar-column-top {
		--ztm-bar-top-inner-width: calc(var(--ztm-column-width) - var(--ztm-border) * 2);
		z-index: 30;
		bottom: var(--ztm-border);
		left: 50%;
		width: var(--ztm-bar-top-inner-width);
		height: calc(var(--ztm-inner-height) - var(--ztm-border) * 2);
		transform: translateX(-50%);
		// border-radius: calc(var(--ztm-bar-top-inner-width) / 2);
		background-image: linear-gradient(135deg,
				var(--ztm-bg-start),
				var(--ztm-bg-end) 100%);
	}
</style>